<template>
  <div class="servegroup">
    <ConTitle :info="info"></ConTitle>
    <el-card class="box-card">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item class="in" label="账号" prop="name">
          <el-input type="text" v-model="ruleForm.acc"></el-input>
        </el-form-item>
        <el-form-item class="in" label="用户名称" prop="username">
          <el-input
            type="text"
            v-model="ruleForm.username"
          ></el-input></el-form-item
        ><el-form-item class="in" label="密码" prop="password">
          <el-input
            type="text"
            v-model="ruleForm.password"
          ></el-input></el-form-item
        ><el-form-item class="in" label="确认密码" prop="password">
          <el-input type="text" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item class="in" label="类型" prop="type">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="超级管理员（所有权限）"></el-radio>
            <el-radio label="管理员（拥有部分权限）"></el-radio>
            <el-radio label="观察员（只读权限）"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="in" label="账号描述" prop="desc">
          <el-input type="text" v-model="ruleForm.tag"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">确认</el-button>
          <el-button @click="resetForm()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $addaccount, $accountEdit } from "@/api/index";
export default {
  name: "AddaccountView",
  data() {
    return {
      info: {
        path: "子账号/",
        text: "添加子账号",
        msg: "-可添加当前组织的子账号，并为其分配权限。",
      },

      ruleForm: {
        name: "",
        username: "",
        password: "",
        type: [],
        desc: "",
      },
      editId: "", //空 代表添加   ，非空 就是修改
      cTime: 0, //创建时间
    };
  },
  components: {
    ConTitle,
  },
  mounted() {
    console.log(this.$route.query);
    let { id, name, username, password } = this.$route.query;
    if (id) {
      this.ruleForm.name = name;
      this.ruleForm.username = username;
      this.ruleForm.password = password;
      this.editId = id;
    }
  },
  watch: {
    $route({ query }) {
      console.log(query);
      if (query) {
        this.ruleForm.name = "";
        this.ruleForm.username = "";
        this.ruleForm.password = "";
        this.editId = "";
      }
    },
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 判断是添加还是修改
          if (this.editId == "") {
            $addaccount(this.ruleForm).then((res) => {
              console.log(res);
              if (res.data.msg == "success") {
                this.$message({
                  message: "",
                  type: "success",
                  duration: 500,
                });
              }
            });
          } else {
            $accountEdit({
              id: this.editId,
              cTime: +this.cTime,
              ...this.ruleForm,
            }).then((res) => {
              console.log(res);
              if (res.data.msg == "success") {
                this.$message({
                  message: "恭喜你，修改",
                  type: "success",
                  duration: 500,
                });
              }
            });
          }
          // 页面跳转到列表页
          this.$router.push("/account/accountlist");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      // 清空表单
      this.ruleForm.name = "";
      this.ruleForm.username = "";
    },
  },
};
</script>


<style lang="scss" scoped>
.in {
  font-weight: bold;
  width: 300px;
}
.box-card {
  margin-top: 10px;
}
</style>